<template>
  <div class="app-container">    <el-button type="primary" v-show="tableData.length" style="margin-bottom: 10px;" @click="updateSysMsgRead('')">全部已读</el-button>
    <el-table v-loading="tableLoading" :data="tableData" border stripe style="width: 900px">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="sendTime" label="发送时间" width="200px"> </el-table-column>
      <el-table-column label="状态">
          <template slot-scope="scope">
            <span :style="{ color: !scope.row.isBind ? 'rgb(3, 167, 240)' : '' }">
              {{ scope.row.isRead ? "已读" : "未读" }}</span>
          </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100px" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-seatch" @click="showDetails(scope.row,scope.$index)">查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 900px">
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="$refs.basicsForm.formValid()" />
    </div>
    <el-dialog title="详情" :visible.sync="openView" width="80vw">
      <h2>{{item.title}}</h2>
      <div style="margin-bottom: 20px;">{{item.content}}</div>
      <div style="text-align: right;">发送时间{{item.sendTime}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openView = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import BasicsForm from "@/components/BasicsForm";
  import {
    sysMsgListOfWeb,
    updateSysMsgReadOfWeb
  } from "@/api/manbing/message";
  export default {
    name: "Sysmsg",
    components: {
      BasicsForm
    },
    data() {
      return {
        loading: false,
        tableLoading: false,
        openView: false, //新增医院弹出
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        tableData: [],
        item: {},
      };
    },
    created() {
      this.getList();
    },
    methods: {
      //列表数据
      getList() {
        this.loading = true;
        this.tableLoading = true;
        sysMsgListOfWeb(this.queryParams)
          .then((res) => {
            if (res.code == 200) {
              this.tableData = res.rows;
              this.total = res.total;
            }
          })
          .finally(() => {
            this.loading = false;
            this.tableLoading = false;
          });
      },
      //详情
      showDetails(item, index) {
        this.openView = true;
        this.item = item;
        if (!item.isRead, index) {
          this.updateSysMsgRead(item.sysMsgId, index)
        }
      },
      //已读
      updateSysMsgRead(sysMsgId, index) {
        let data = {}
        if (sysMsgId) {
          data.sysMsgId = sysMsgId
        }
        updateSysMsgReadOfWeb(data)
          .then((res) => {
            if (res.code == 200) {
              if (sysMsgId) {
                this.tableData[index].isRead = 1
              } else {
                this.getList()
              }
            }
          })
      },
    },
  };
</script>
<style scoped lang="scss">
</style>
